<template>
    <div class="common-layout">
        <el-container>
            <!--菜单组件-->
            <el-header>
                <Menu></Menu>
            </el-header>
            <el-container class="mineContainer">
                <el-aside width="220px">
                    <el-row class="tac">
                        <el-col :span="12">
                            <el-menu
                                    default-active="1"
                                    active-text-color="#ffd04b"
                                    background-color="#545c64"
                                    class="el-menu-vertical-demo"
                                    text-color="#fff"
                            >
<!--                                <el-menu-item index="0">-->
                                <div style="padding-top: 20px;padding-bottom: 20px">
                                    <el-button type="primary" @click="jumpUpload"><el-icon><Upload /></el-icon>上传新课程</el-button>
                                </div>

<!--                                </el-menu-item>-->

<!--                                <el-menu-item index="1" @click="jumpHome">-->
<!--                                    &lt;!&ndash;                                    <el-icon><icon-menu /></el-icon>&ndash;&gt;-->
<!--                                    <el-icon ><Edit /></el-icon>-->
<!--                                    <span >主页</span>-->
<!--                                </el-menu-item>-->
<!--                                <el-menu-item index="2" @click="jumpTeaRegister">-->
<!--                                    <el-icon><icon-menu /></el-icon>-->
<!--                                    <span >视频中心</span>-->
<!--                                </el-menu-item>-->

                                <el-sub-menu index="2">
                                    <template #title>
                                        <el-icon>
                                            <setting/></el-icon>
                                        <span>课程管理</span>
                                    </template>
                                    <el-menu-item index="2-1" @click="jumpCourse">
                                        <el-icon><setting/></el-icon>
                                        <span>上线课程</span>
                                    </el-menu-item>
                                    <el-menu-item index="2-2" @click="jumpToExamine">
                                        <el-icon><setting/></el-icon>
                                        <span>审核中课程</span>
                                    </el-menu-item>
                                </el-sub-menu>

                            </el-menu>
                        </el-col>
                    </el-row>
                </el-aside>
                <el-main>
                    <router-view/>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script setup>
    import { ref } from 'vue'
    import {useRouter} from 'vue-router'
    import {useStore} from 'vuex'
    import {
        Document,
        Menu as IconMenu,
        Location,
        Setting,
        Edit,Upload
    } from '@element-plus/icons-vue'
    const router = useRouter();
    const jumpUpload=()=>{
        router.push({path:"/creationcenter/uploadNewMaterials"})
    }
    const jumpHome = ()=>{
        router.push({path:"/creationcenter"})
    }
    const jumpCourse = ()=>{
        router.push({path:"/creationcenter/CourseControl"})
    }
    const jumpToExamine =()=>{
        router.push({path:"/creationcenter/examiningCourse"})
    }

</script>

<style scoped>
    .common-layout{
        height: 100%;
    }
    .el-container{
        height: 100%;
    }
    .tac{
        height: 100%;
    }
    .el-menu-vertical-demo{
        height: 100%;
    }
    .el-menu-vertical-demo:not(.el-menu--collapse) {
        width: 200px;
        min-height: 85vh;
    }
</style>